<template>
  <div>
    <h2 v-bind:style="{ paddingLeft:  '40px' }">我的社团</h2>
    <el-row>
      <el-col :span="8" v-for="community in communities" :key="community.communityId">
        <div style="margin: 4% 4%;">
          <el-card shadow="hover" :body-style="{ padding: '0px', margin: '8%'}" style="height: 720px">
            <p class="card-title-one">{{community.communityName}}</p>
            <img :src="baseUrl + community.communityLogo" class="image" style="width: 100%;height: 300px;">
            <div style="padding: 3%;margin: 2%;">
              <div class="card-title-three">{{community.communityDiscription}}</div>
            </div>
            <div style="padding: 3%; width: 130px; margin: 0 auto; ">
                <el-button
                  size="mini"
                  type="danger"
                  style="margin-left: 10%;"
                  @click="handleDelete(community.communityId,community.communityName)">退出该社团
                </el-button>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<script>
    import localStorageUtil from "../../utils/localStorageUtil";

    export default {
        name: "CommunityOwnInfo",
        data() {
            return {
                baseUrl: 'http://127.0.0.1:8888/community-management-service/',
                communities: [],
                currentUser: localStorageUtil.read('SET_USER')
            }
        },
        created() {
            this.fetchCommunities()
        },
        methods:{
            fetchCommunities(){
                let userId = this.currentUser.userId;
                this.$store.dispatch('community/findByMyId',userId).then((res) => {
              // this.axios.get('http://127.0.0.1:8888/community-management-service/communities/findByMyId/'+userId+'').then((res) => {
                    console.log(res);
                    if (res.code === 200){
                        this.communities = res.data
                    }
                })
            },
             handleDelete(communityId,communityName) {
                let params = {
                    communityId: communityId,
                    userId: this.currentUser.userId
                };
                   this.$confirm(`确认退出${communityName}社团吗？`)
                     .then(_ => {
                        this.$store.dispatch('community/quitById', params).then((res) => {
                            if (res.code === 200) {
                                this.$message({
                                    showClose: true,
                                    message: '退出成功',
                                    type: 'success'
                                })
                                 this.fetchCommunities()
                            }
                            this.fetchMembers()
                        })
                    })
                    .catch(_ => {
                        this.$message({
                            showClose: true,
                            message: '已经取消'
                        })
                    });
              }
        }
    }
</script>


<style>
  .card-title-one {
    font-size: 20px;
    font-family: 微软雅黑;
    text-align: center;
    font-weight: bold;
    color: #6F87DF;
  }

  .card-title-three {
    font-size: 16px;
    font-family: 微软雅黑;
    text-align: left;
    font-weight: bold;
  }
</style>
